<template>
  <view class="container">
    <!-- 顶部圆形logo -->
    <view class="logo">
      <image src="../../static/nan.png" class="logo-image"></image>
    </view>

    <!-- 客户头像和名称 -->
    <view class="customer-info-left">
      <image src="../../static/nan.png" class="customer-avatar"></image>
      <text class="customer-name">{{ info.compellation || '未知客户' }}</text>
    </view>

    <!-- 运动计划 -->
    <view class="action-card card-large" @click="goUrl(2)">
      <image src="../../static/muban.png" class="action-image"></image>
      <view class="action-title fs60r">运动计划</view>
    </view>

    <!-- 体测数据 -->
    <view class="action-card card-large" @click="goUrl(3)" style="background: #000;">
      <image src="../../static/jihua1.png" class="action-image"></image>
      <view class="action-title fs60r" style="color: #fff;">体测数据</view>
    </view>
  </view>
</template>

<script>
import { customerDetail } from "../../api/fit";
export default {
  data() {
    return {
      info: {},
    };
  },
  onLoad(options) {
    this.getDeail(options.id);
  },
  methods: {
    async getDeail(id) {
      const res = await customerDetail(id);
      this.info = res.data;
    },
    goUrl(type) {
      const routes = {
        1: `/pages/customer/detail1?id=${this.info.id}`,
        2: `/pages/customer/plan?id=${this.info.id}`,
        3: `/pages/physical/index?id=${this.info.id}`,
      };
      uni.navigateTo({
        url: routes[type],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page{
  background: #f8f8f8;
}
.container {
  min-height: 100vh;
  padding: 40rpx;
  background: #efefef;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo {
  margin-bottom: 40rpx;
}

.logo-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 60rpx;
}

.customer-info-left {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
  justify-content: flex-start;
  width: 100%;
}

.customer-avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 20%;
  margin-right: 20rpx;
}

.customer-name {
  font-size: 40rpx;
  font-weight: bold;
  color: #000;
}

.action-card {
  width: 100%;
  // max-width: 600rpx;
  background: #ffffff;
  border-radius: 30rpx;
  // padding: 20rpx;
  margin-bottom: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;

  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  }
}

.card-large {
  height: 25vh; /* 占据半个屏幕高度 */
}

.action-image {
  width: 200rpx;
  height: 200rpx;
  margin-right: 20rpx;
}

.action-title {
  // font-size: 32rpx;
  font-weight: 800;
  color: #000;
}
</style>
